<template>
  <div class="form-wrap">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="table-content" v-loading="isShow">
      <el-form
        :model="parameter"
        ref="formRules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
        :rules="formRules"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">楼宇总账</div>
        </div>
        <el-row
          :gutter="24"
          style="display: flex; flex-wrap: wrap"
        >
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="楼宇编号" prop="lybh">
              <el-input
                v-model="parameter.lybh"
                :disabled="isEnterpriseDisabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="楼宇名称" prop="lyName">
              <el-input
                v-model="parameter.lyName"
                :disabled="isEnterpriseDisabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="责任单位" prop="zrUnit">
              <!-- <el-input v-model="parameter.zrUnitName"></el-input> -->
              <el-select
                placeholder="选择"
                v-model="parameter.zrUnit"
                clearable
                style="width: 100%"
                @change="
                  (e) => {
                    parameter.zrUnitName =
                      zrUnitOptions.find(
                        (item) => item.pkid == e
                      ).deptName
                  }
                "
                @clear="
                  () => {
                    parameter.zrUnitName = ''
                  }
                "
                :disabled="isEnterpriseDisabled"
              >
                <el-option
                  v-for="item in zrUnitOptions"
                  :key="item.pkid"
                  :label="item.deptName"
                  :value="item.pkid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="楼宇类型"
              prop="type"
              :rules="formRules.type"
            >
              <el-select
                v-model="parameter.type"
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.type"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="产业方向（商业楼宇填写）"
              prop="direction"
              :rules="formRules.direction"
            >
              <el-select
                v-model="parameter.direction"
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="建筑面积"
              prop="jzmj"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.jzmj"
                :disabled="isAdminDisabled"
              >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="楼层数"
              prop="lcs"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.lcs"
                :disabled="isAdminDisabled"
              >
                <template slot="append">层</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="楼高度"
              prop="lgd"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.lgd"
                :disabled="isAdminDisabled"
              >
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="楼板承重"
              prop="lbcz"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.lbcz"
                :disabled="isAdminDisabled"
              >
                <template slot="append">吨</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="标准层高"
              prop="bzcg"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.bzcg"
                :disabled="isAdminDisabled"
              >
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="容积率"
              prop="plotRatio"
              :rules="formRules.plotRatio"
            >
              <el-input
                v-model="parameter.plotRatio"
                :disabled="isAdminDisabled"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="停车位" prop="tcw">
              <el-input
                v-model="parameter.tcw"
                :disabled="isAdminDisabled"
              >
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="已出租面积"
              prop="yczmj"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.yczmj"
                :disabled="isAdminDisabled"
              >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="待出租面积"
              prop="dczmj"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.dczmj"
                :disabled="isAdminDisabled"
              >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="签约率" prop="qyl">
              <el-input
                v-model="parameter.qyl"
                :disabled="isAdminDisabled"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="建设状态"
              prop="buildStatus"
              :rules="formRules.buildStatus"
            >
              <el-select
                v-model="parameter.buildStatus"
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.buildStatus"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="装修状态"
              prop="fitmentStatus"
              :rules="formRules.fitmentStatus"
            >
              <el-select
                v-model="parameter.fitmentStatus"
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.fitmentStatus"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="周边配套"
              prop="configuration"
              :rules="formRules.configuration"
            >
              <el-select
                v-model="parameter.configuration"
                multiple
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.configuration"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="载体属性"
              prop="property"
              :rules="formRules.property"
            >
              <el-select
                v-model="parameter.property"
                multiple
                clearable
                :disabled="isAdminDisabled"
              >
                <el-option
                  v-for="(
                    item, index
                  ) in addFieldsOption.property"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="楼宇经纬度" prop="address">
              <el-input
                v-model="parameter.address"
                :disabled="isAdminDisabled"
                placeholder="如：104.450373,30.316121"
              ></el-input>
              <i
                class="el-icon-location"
                @click="handleShowMap"
              ></i>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">招租信息</div>
        </div>
        <el-row
          :gutter="24"
          style="display: flex; flex-wrap: wrap"
        >
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="月租"
              prop="yz"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.yz"
                :disabled="isAdminDisabled"
              >
                <template slot="append">元/m²/月</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="年租"
              prop="nz"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.nz"
                :disabled="isAdminDisabled"
              >
                <template slot="append">元/m²/年</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="用水费"
              prop="ysf"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.ysf"
                :disabled="isAdminDisabled"
              >
                <template slot="append">元/吨</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="用电费"
              prop="ydf"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.ydf"
                :disabled="isAdminDisabled"
              >
                <template slot="append">元/度</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col ::sm="24" :md="12" :lg="8" :xl="6">
            <el-form-item
              label="用气费"
              prop="yqf"
              :rules="formRules.num"
            >
              <el-input
                v-model="parameter.yqf"
                :disabled="isAdminDisabled"
              >
                <template slot="append">元/立方米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 入驻企业 -->
        <div class="project-part">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div class="attachment-form-title">
              入驻企业
              <div
                class="attachment-form-title-btn"
                @click="handleAdd"
                v-if="!isAdminDisabled"
              >
                新增企业
              </div>
            </div>
          </div>
          <div class="project-part-content">
            <table class="table">
              <thead>
                <tr>
                  <th style="width: 50px">序号</th>
                  <th style="width: calc(100% - 100px)">
                    企业名称
                  </th>
                  <th
                    style="width: 50px"
                    v-if="!isAdminDisabled"
                  >
                    操作
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(
                    item, index
                  ) in parameter.companyInfoList"
                  :key="index"
                >
                  <td style="width: 50px">
                    {{ item.orderIndex }}
                  </td>
                  <td style="width: calc(100% - 100px)">
                    <el-form-item
                      label=""
                      :prop="
                        'companyInfoList.' + index + '.name'
                      "
                    >
                      <!--                      <el-input-->
                      <!--                        v-model="item.name"-->
                      <!--                        :disabled="isAdminDisabled"-->
                      <!--                      ></el-input>-->
                      <el-select
                        v-model="item.name"
                        clearable
                        :disabled="isAdminDisabled"
                        filterable
                        @visible-change="
                          handleSelectVisibleChange
                        "
                      >
                        <el-option
                          v-for="company in companyList"
                          :key="company.companyId"
                          :label="company.companyName"
                          :value="company.companyId"
                          :disabled="company.disabled"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                  <td
                    style="width: 50px"
                    v-if="!isAdminDisabled"
                  >
                    <div
                      class="table-btn"
                      @click="handleDelete(index)"
                    >
                      删除
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-form>
    </div>
    <div
      class="bottom_box"
      v-if="this.$route.query.type !== 'detail'"
    >
      <div class="box_left"></div>
      <div class="box_right">
        <!-- <div
          class="sh save"
          @click="saveFileContent()"
        >
          保存
        </div> -->
        <div class="sh" @click="saveFileContent">提交</div>
      </div>
    </div>
    <customizeDialog
      :visible="dialogMapVisible"
      @update:visible="dialogMapVisible = $event"
      ref="dialog"
      :title="`${headerTitle}`"
      :width="'1200px'"
      top="100px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :has-footer="false"
      customPadding="0px"
    >
      <div
        v-loading="loading"
        element-loading-text="文件正在解析中，请稍后..."
      >
        <MapView
          :viewer-id="viewerId"
          :key="countMapLoad"
          @onload="onMapLoad"
        />
        <Utool
          :viewerId="viewerId"
          :position="{ top: '60px', right: '20px' }"
          :t="[]"
          :b="[
            {
              title: '初始位置',
              icon: 'dingwei'
            }
          ]"
          :showMore="false"
        ></Utool>
      </div>
      <div class="operate" v-if="!isAdminDisabled">
        <el-button
          @click="handleSureCoordinate"
          class="save-btn"
          >确定</el-button
        >
        <el-button
          @click="handleCancleCoordinate"
          class="cancle-btn"
          >取消</el-button
        >
      </div>
    </customizeDialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb/index'
import {
  getBuildingDetail,
  getCompany,
  // getZrUnit,
  saveOrUpdate,
  shenheForm
} from '@/api/lygl'
import { queryJsgsList } from '@/api/projectMessage'
import { isAdmin, isEnterprise } from '@/utils/permission'
import MapView from '@/components/mapView'
import Utool from '@/components/utool/index-land'
import customizeDialog from '@/components/checkHistory/customizeDialog.vue'
import cacheUtil from '@/utils/cache'
import { homePosition } from '@/utils/constant'

let _layerManager, _viewer
const mapViewer = {}

export default {
  components: {
    Breadcrumb,
    MapView,
    Utool,
    customizeDialog
  },
  data() {
    return {
      isShow: false,
      titles: [],
      parameter: {
        companyInfoList: [],
        configuration: [],
        property: []
      },
      zrUnitOptions: [],
      formRules: {
        lybh: [
          {
            required: true,
            message: '楼宇编号不能为空',
            trigger: 'blur'
          }
        ],
        lyName: [
          {
            required: true,
            message: '楼宇名称不能为空',
            trigger: 'blur'
          }
        ],
        zrUnit: [
          {
            required: true,
            message: '责任不能为空',
            trigger: 'blur'
          }
        ],
        // type: [
        //   {
        //     required: true,
        //     message: '楼宇类型不能为空',
        //     trigger: 'blur'
        //   }
        // ],
        num: [
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: '请输入最多两位小数的正数',
            trigger: 'blur'
          }
        ],
        tcw: [
          {
            pattern: /^[+]{0,1}(\d+)$/,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ],
        qyl: [
          {
            pattern:
              /^(100|([1-9][0-9]?)|(0|[1-9][0-9]?)(\.[\d]{1,2}))$/,
            message: '请输入0-100最多两位小数的数字',
            trigger: 'blur'
          }
        ]
      },

      dialogMapVisible: false,
      viewerId: 'dwgMap',
      countMapLoad: 0,
      headerTitle: '项目位置',
      loading: false,
      cameraConfig: null,
      billboards: [],
      addFieldsOption: {
        type: ['商业楼宇', '厂房', '高品质科创空间'],
        direction: [
          '智能制造',
          '人工智能',
          '航空航天',
          '消费电子',
          '其它'
        ],
        buildStatus: ['已建成', '未建成'],
        fitmentStatus: ['清水', '带装修'],
        configuration: [
          '近地铁',
          '近干道',
          '近学校',
          '近商业楼宇',
          '近医院'
        ],
        property: ['商业', '酒店', '办公', '教育', '餐饮']
      },
      companyList: []
    }
  },
  computed: {
    isAdminDisabled() {
      return (
        this.$route.query.type === 'detail' ||
        (this.$route.query.type === 'add' && isAdmin())
      )
    },
    isEnterpriseDisabled() {
      return (
        isEnterprise() ||
        this.$route.query.type === 'detail'
      )
    }
  },
  async mounted() {
    this.titles = JSON.parse(this.$route.query.titles)
    await this.getUnit()
    this.getCompanyList()
    if (this.$route.query.pkid) {
      await this.getDetail()
    }
  },
  methods: {
    handleSelectVisibleChange(bool) {
      if (bool) {
        // console.log(this.companyList)
        this.companyList.map(
          (item) => (item.disabled = false)
        )
        this.parameter.companyInfoList.forEach((item) => {
          const id = item.name
          const val = this.companyList.find(
            (item) => item.companyId === id
          )
          val.disabled = true
        })
      }
    },
    getCompanyList() {
      getCompany().then((res) => {
        if (res.success) {
          this.companyList =
            res.data?.map((item) => {
              return {
                ...item,
                disabled: false
              }
            }) || []
        }
      })
    },
    getDetail() {
      this.isShow = true
      getBuildingDetail(this.$route.query.pkid).then(
        (res) => {
          this.parameter = res.data
          this.isShow = false
          const obj = {
            configuration: res?.data?.configuration
              ? res?.data?.configuration.split(',')
              : [],
            property: res?.data?.property
              ? res?.data?.property.split(',')
              : []
          }
          this.parameter = {
            ...this.parameter,
            ...obj
          }
        }
      )
    },
    getUnit() {
      queryJsgsList().then((res) => {
        this.zrUnitOptions = res.data
      })
    },
    saveFileContent() {
      this.$refs.formRules.validate((valid) => {
        if (valid) {
          saveOrUpdate({
            ...this.parameter,
            configuration:
              this.parameter.configuration.join(','),
            property: this.parameter.property.join(','),
            ...{
              status: isEnterprise()
                ? 1
                : this.parameter.status
            }
          })
            .then((res) => {
              this.$router.push({
                path: '/wisdomOperation/buildingManagement/list',
                query: { refresh: Date.now() }
              })
              this.$message.success(
                this.$route.query.pkid
                  ? '编辑成功'
                  : '新增成功'
              )
              // if(this.$route.query.pkid){
              //     //编辑
              //     shenheForm(this.$route.query.pkid).then(res=>{
              //         this.$message.success('编辑成功')
              //     }).catch(err=>{
              //         this.$message.error('编辑失败')
              //     })
              // }else{
              //     //新增
              //     console.log(res)
              //     shenheForm(res.data.pkid).then(res=>{
              //         this.$message.success('新增成功')
              //     }).catch(err=>{
              //         this.$message.error('新增失败')
              //     })
              // }
            })
            .catch((err) => {
              this.$message.error(
                this.$route.query.pkid
                  ? '编辑失败'
                  : '新增失败'
              )
            })
        }
      })
    },
    onMapLoad({ id, viewer }) {
      _viewer = viewer
      mapViewer[this.viewerId] = viewer

      _viewer.scene.imageryLayers.addImageryProvider(
        new Cesium.TiandituImageryProvider({
          mapStyle: null,
          token: 'a49a9220798216424e34b531cb3fa5b2',
          url: 'https://t0.tianditu.gov.cn/img_w/wmts'
        }),
        0
      )

      this.billboards = mapViewer[
        this.viewerId
      ].scene.primitives.add(
        new Cesium.BillboardCollection()
      )
      mapViewer[
        this.viewerId
      ].screenSpaceEventHandler.setInputAction(
        this.leftClick,
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      )
      this.setViewer(viewer)
      if (this.parameter.address) {
        this.billboards.add({
          id: 'location-point',
          width: 18,
          height: 18,
          position: Cesium.Cartesian3.fromDegrees(
            Number(this.parameter.address.split(',')[0]),
            Number(this.parameter.address.split(',')[1]),
            0
          ),
          image: require('@/assets/img/location.png'),
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM
        })
      }
    },
    leftClick(movement) {
      if (this.isAdminDisabled) {
        return
      }
      const cartesian = mapViewer[
        this.viewerId
      ].camera.pickEllipsoid(movement.position)
      const cartographic =
        Cesium.Cartographic.fromCartesian(cartesian)
      const lng = Cesium.Math.toDegrees(
        cartographic.longitude
      ) // 经度
      const lat = Cesium.Math.toDegrees(
        cartographic.latitude
      ) // 纬度

      this.billboards && this.billboards.removeAll()
      this.billboards.add({
        id: 'location-point',
        width: 18,
        height: 18,
        position: Cesium.Cartesian3.fromDegrees(
          lng,
          lat,
          0
        ),
        image: require('@/assets/img/location.png'),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      })
      this.newLocation = `${lng},${lat}`
    },
    // 打开弹窗
    handleShowMap() {
      this.dialogMapVisible = true
    },
    // 取消定位
    handleCancleCoordinate() {
      this.billboards && this.billboards.removeAll()
      this.dialogMapVisible = false
    },
    // 确定定位
    handleSureCoordinate() {
      this.parameter.address = this.newLocation
      this.dialogMapVisible = false
    },
    // 设置视角
    setViewer(viewer) {
      const cacheItem = cacheUtil.getItem('camera')
      if (cacheItem) {
        try {
          const config = JSON.parse(cacheItem)
          if (config.cameraHeight && config.centerPoint) {
            this.cameraConfig = config
          } else {
            this.cameraConfig = null
          }
        } catch (e) {
          console.error(e)
          this.cameraConfig = null
        }
      } else {
        this.cameraConfig = null
      }
      if (this.parameter.address) {
        viewer.camera.flyTo({
          destination: this.cameraConfig
            ? Cesium.Cartesian3.fromDegrees(
                Number(
                  this.parameter.address.split(',')[0]
                ),
                Number(
                  this.parameter.address.split(',')[1]
                ),
                Number(this.cameraConfig.cameraHeight)
              )
            : homePosition.destination,
          orientation: homePosition.orientation
        })
      } else {
        viewer.camera.flyTo({
          destination: this.cameraConfig
            ? Cesium.Cartesian3.fromDegrees(
                Number(
                  this.cameraConfig.centerPoint.split(
                    ','
                  )[0]
                ),
                Number(
                  this.cameraConfig.centerPoint.split(
                    ','
                  )[1]
                ),
                Number(this.cameraConfig.cameraHeight)
              )
            : homePosition.destination,
          orientation: homePosition.orientation
        })
      }
      viewer.scene.screenSpaceCameraController.enableCollisionDetection = true
      viewer.scene.globe.globeAlpha = 1
    },

    // 新增企业
    handleAdd() {
      this.parameter.companyInfoList.push({
        pkid: '',
        name: '',
        orderIndex:
          this.parameter.companyInfoList.length + 1
      })
    },

    // 删除企业
    async handleDelete(index) {
      this.parameter.companyInfoList.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.form-wrap {
  position: relative;
  width: 100%;
  height: 100% !important;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .table-content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 10px 27px;
  }
  .step-tab {
    width: 100%;
  }
}
.bottom_box {
  width: 100%;
  height: 78px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 2px;
  z-index: 1000;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 29px 0 29px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  .sh {
    width: 90px;
    height: 32px;
    background: #497fa3;
    border-radius: 2px;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    margin-left: 20px;
  }
  .shenheDisabled {
    cursor: default;
    background: rgb(245, 245, 245);
    color: rgb(176, 176, 176);
  }
  .save {
    background-color: #ffffff;
    border: 1px solid #497fa3;
    color: #497fa3;
  }
  .box_left {
    display: flex;
    justify-content: flex-start;
    .shTime {
      // align-items: center;
      display: flex;
      align-items: center;
      margin-left: 20px;
      .yijian {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500px;
      }
    }
  }
  .box_right {
    display: flex;
    // justify-content: flex-end;
  }
}
::v-deep {
  .el-form-item__label {
    line-height: 14px;
  }
  .el-form-item__content {
    line-height: 32px !important;
  }
}
::v-deep {
  .el-dialog {
    .el-dialog__body {
      .content {
        padding: 0;
      }
    }
    .cesium-viewer {
      height: 520px !important;
    }
  }
  .el-icon-location {
    position: absolute;
    top: 3px;
    left: 295px;
    color: #00baff;
    font-size: 25px;
    cursor: pointer;
  }
  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    line-height: 40px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 24px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }
    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }
      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // width: 320px !important;
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }
}
.preview-button {
  background: #497fa3;
  border: 1px solid #497fa3;
  border-radius: 2px;
  color: white;
}
.success {
  color: #00ca6d;
}
.fail {
  color: #f9801c;
}
.attachment-form {
  padding: 0 27px;
  &-title {
    color: #4c565c;
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    font-size: 16px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      margin-right: 7px;
    }
    &-btn {
      color: #00baff;
      font-size: 14px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}

.operate {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep {
    .save-btn {
      background: #497fa3;
      border: 1px solid #497fa3;
      color: white;
      font-size: 14px;
      width: 80px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0px;
    }
    .cancle-btn {
      font-size: 14px;
      width: 80px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #497fa3;
      color: #497fa3;
    }
  }
}
.table {
  border-collapse: collapse;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
  &-btn {
    color: #f56c6c;
    font-size: 14px;
    cursor: pointer;
  }
  thead {
    background-color: #f2f6fb;
  }
  td,
  th {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #6b767d;
    line-height: 42px;
    border: 1px solid #f2f6fb;
    text-align: center;
  }
  td {
    font-weight: normal;
  }
  tbody {
    tr {
      td {
        &:nth-child(1) {
          width: 50px;
        }
        &:nth-child(2) {
          width: 300px;
        }
        &:nth-child(3) {
          width: 300px;
        }
        &:nth-child(4) {
          max-width: 1000px;
        }
        &:nth-child(5) {
          width: 300px;
        }
      }
    }
  }

  ::v-deep {
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-input__inner {
      width: 100% !important;
    }

    .el-form-item__error {
      z-index: 2;
    }
  }
}
</style>
